From 0ebb60f986682ad8d3538c2fd1d708a861e0b1fb Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Mon, 22 Aug 2022 15:49:08 -0700
Subject: migrate to sveltekit-i18n

---
 src/routes/[username]/+page.svelte              |  8 ++--
 src/routes/[username]/dashboard/+page.svelte    | 22 +++++-----
 src/routes/[username]/receive/+page.svelte      |  8 ++--
 src/routes/[username]/settings/+page.svelte     | 54 ++++++++++++-------------
 src/routes/[username]/support/+page.svelte      | 12 +++---
 src/routes/[username]/transactions/+page.svelte | 14 +++----
 6 files changed, 59 insertions(+), 59 deletions(-)

(limited to 'src/routes/[username]')

diff --git a/src/routes/[username]/+page.svelte b/src/routes/[username]/+page.svelte
index ed428d46..f2117be2 100644
--- a/src/routes/[username]/+page.svelte
+++ b/src/routes/[username]/+page.svelte
@@ -4,7 +4,7 @@
 	import { AppHeader, Icon, PageNotFound } from '$comp';
 	import { user } from '$lib/store';
 	import { copy } from '$lib/utils';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 	export let data;
 
 	let lightningAddress = `${data?.username}@coinos.io`;
@@ -43,7 +43,7 @@
 			<div class="xl:ml-[calc(15vw-48px)] space-y-2 w-full md:w-72">
 				<h1 class="text-3xl font-bold">{data.username}</h1>
 
-				<p class="text-secondary">{$_('user.addressGoesHere')}</p>
+				<p class="text-secondary">{$t('user.addressGoesHere')}</p>
 
 				<!--
         we need to hook this up
@@ -51,7 +51,7 @@
 					class="border rounded-full py-2 w-28 font-semibold flex justify-center items-center text-sm"
 					on:click={() => (followed = !followed)}
 					><Icon icon={followed ? 'minus' : 'plus'} style="mr-1" />
-					{$_('user.' + (followed ? 'remove' : 'follow'))}
+					{$t('user.' + (followed ? 'remove' : 'follow'))}
 				</button>
         -->
 			</div>
@@ -62,7 +62,7 @@
 					class="w-[292px] md:w-[342px] h-[342px] border border-lightgrey rounded-3xl flex p-5 justify-center items-center relative"
 				/>
 
-				<p class="text-secondary text-center font-semibold">{$_('user.scanToPayBTC')}</p>
+				<p class="text-secondary text-center font-semibold">{$t('user.scanToPayBTC')}</p>
 
 				<div
 					class="bg-primary font-semibold rounded-xl text-sm py-2 px-3 flex flex-wrap justify-center items-center"
diff --git a/src/routes/[username]/dashboard/+page.svelte b/src/routes/[username]/dashboard/+page.svelte
index 56aa0d6f..ef8bef88 100644
--- a/src/routes/[username]/dashboard/+page.svelte
+++ b/src/routes/[username]/dashboard/+page.svelte
@@ -3,7 +3,7 @@
 	import { tick } from 'svelte';
 	import { AppHeader, Icon } from '$comp';
 	import { selectedRate, user } from '$lib/store';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 
 	let payreq = '',
 		payreqField,
@@ -48,7 +48,7 @@
 		class="text-center mx-auto lg:text-left lg:mx-0 lg:ml-[calc(15vw-48px)] mt-12 w-full md:w-72"
 	>
 		<h2 class="text-2xl font-semibold">{$user.username}</h2>
-		<span class="text-secondary">{$_('user.addressGoesHere')}</span>
+		<span class="text-secondary">{$t('user.addressGoesHere')}</span>
 	</div>
 
 	<div class="px-3 md:px-0 flex justify-center items-center mt-10 lg:mt-0 mb-20">
@@ -58,28 +58,28 @@
 			</h1>
 			{#if !withdrawing}
 				<span class="text-secondary mx-auto text-lg font-bold"
-					>{$_('user.dashboard.bitcoinPrice')}
+					>{$t('user.dashboard.bitcoinPrice')}
 					<span class="text-black"
-						>{$selectedRate ? btcPrice : $_('user.dashboard.fetchingRate')}</span
+						>{$selectedRate ? btcPrice : $t('user.dashboard.fetchingRate')}</span
 					>
 				</span>
 
-				<span class="text-secondary block mt-1">{@html $_('user.dashboard.dataFromBinance')} </span>
+				<span class="text-secondary block mt-1">{@html $t('user.dashboard.dataFromBinance')} </span>
 
 				<h3 class="text-secondary font-bold border-b pb-1 mt-10 mb-6 w-full md:w-[500px]">
-					{$_('user.dashboard.ACCOUNT_BALANCE')}
+					{$t('user.dashboard.ACCOUNT_BALANCE')}
 				</h3>
 
 				<span class="text-3xl font-bold block mb-1"
-					>{$selectedRate ? accountBalanceFiat : $_('user.dashboard.fetchingRate')}</span
+					>{$selectedRate ? accountBalanceFiat : $t('user.dashboard.fetchingRate')}</span
 				>
 
 				<span class="text-secondary text-xl block">{accountBalanceSats} SAT</span>
 
 				<button class="rounded-full border py-2 font-bold w-28 mt-4" on:click={toggle}
-					>{$_('user.dashboard.withdraw')}</button
+					>{$t('user.dashboard.withdraw')}</button
 				>
-				<p class="text-secondary my-2">{$_('user.dashboard.conversionFeeWarning')}</p>
+				<p class="text-secondary my-2">{$t('user.dashboard.conversionFeeWarning')}</p>
 			{:else}
 				<div class="space-y-3 w-[250px] md:w-[500px] md:pr-20">
 					<button on:click={() => (withdrawing = false)}>
@@ -100,7 +100,7 @@
 
 					<div>
 						<label for="note" class="font-bold mb-1 block"
-							>{$_('user.dashboard.optionalNote')}</label
+							>{$t('user.dashboard.optionalNote')}</label
 						>
 						<textarea name="note" rows={2} class="block rounded-2xl p-3 w-full bg-primary" />
 					</div>
@@ -110,7 +110,7 @@
 						class="{!payreq
 							? 'opacity-50'
 							: 'opacity-100'} rounded-2xl border py-3 font-bold w-full mt-2 bg-black text-white"
-						on:click={withdraw}>{$_('user.dashboard.send')}</button
+						on:click={withdraw}>{$t('user.dashboard.send')}</button
 					>
 				</div>
 			{/if}
diff --git a/src/routes/[username]/receive/+page.svelte b/src/routes/[username]/receive/+page.svelte
index 2706ec86..3ac2aa27 100644
--- a/src/routes/[username]/receive/+page.svelte
+++ b/src/routes/[username]/receive/+page.svelte
@@ -5,7 +5,7 @@
 	import { invoiceAmount, invoiceAmountFiat, selectedRate, user } from '$lib/store';
 	import { post, warning } from '$lib/utils';
 	import { page } from '$app/stores';
-	import { _, number } from 'svelte-i18n';
+  import { t } from '$lib/translations';
 
 	let useFiat = true;
 	let amountFiat = 0;
@@ -53,7 +53,7 @@
 					}
 				}
 			} else if (value !== '.' && value !== '<' && parseInt(amountFiat + value) > $selectedRate) {
-				warning($_('user.receive.lessThan1BTCWarning'));
+				warning($t('user.receive.lessThan1BTCWarning'));
 			} else if (amountFiat !== 0 && amountFiat.match(/\.../)) {
 				return;
 			} else {
@@ -73,7 +73,7 @@
 					}
 				}
 			} else if (value !== '<' && parseInt(amountSats + value) > 100000000) {
-				warning($_('user.receive.lessThan1BTCWarning'));
+				warning($t('user.receive.lessThan1BTCWarning'));
 			} else {
 				amountSats = amountSats + value;
 			}
@@ -185,7 +185,7 @@
 							: 'opacity-100'}"
 						on:click={submit}
 						disabled={$invoiceAmount === 0}
-						><Icon icon="qr" style="mr-2" /> {$_('user.receive.showQR')}</button
+						><Icon icon="qr" style="mr-2" /> {$t('user.receive.showQR')}</button
 					>
 					<!--
 					<button
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index 71cf1232..c0e0a9a5 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { AppHeader, Icon, Toggle, LocaleSelector } from '$comp';
 	import { user, colorTheme, rates, token } from '$lib/store';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 	import { success, failure, put } from '$lib/utils';
 
 	let setting = 'account';
@@ -41,31 +41,31 @@
 
 	<div class="my-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
 		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
-			{$_('user.settings.header')}
+			{$t('user.settings.header')}
 		</h1>
 
 		<div class="font-bold flex justify-between items-center border-b pb-3 text-secondary">
 			<button class:selected={setting === 'account'} on:click={() => (setting = 'account')}
-				>{$_('user.settings.ACCOUNT')}</button
+				>{$t('user.settings.ACCOUNT')}</button
 			>
 
 			<button class:selected={setting === 'pos'} on:click={() => (setting = 'pos')}
-				>{$_('user.settings.POINT_OF_SALE')}</button
+				>{$t('user.settings.POINT_OF_SALE')}</button
 			>
 
 			<button class:selected={setting === 'security'} on:click={() => (setting = 'security')}
-				>{$_('user.settings.SECURITY')}</button
+				>{$t('user.settings.SECURITY')}</button
 			>
 		</div>
 
 		{#if setting === 'account'}
 			<div>
-				<label for="language" class="font-bold block mb-1">{$_('user.settings.locale')}</label>
+				<label for="language" class="font-bold block mb-1">{$t('user.settings.locale')}</label>
 				<LocaleSelector style="block py-3 w-full" />
 			</div>
 
 			<div>
-				<label for="username" class="font-bold mb-1 block">{$_('user.settings.username')}</label>
+				<label for="username" class="font-bold mb-1 block">{$t('user.settings.username')}</label>
 				<input
 					type="text"
 					disabled
@@ -77,7 +77,7 @@
 
 			<div class="relative">
 				<label for="password" class="block font-bold block mb-1"
-					>{$_('user.settings.newPassword')}</label
+					>{$t('user.settings.newPassword')}</label
 				>
 				{#if revealPassword}
 					<input type="text" class="block border rounded-xl p-3 w-full" bind:value={password} />
@@ -95,34 +95,34 @@
 
 			<div>
 				<label for="address" class="font-bold mb-1 block"
-					>{$_('user.settings.businessAddress')}</label
+					>{$t('user.settings.businessAddress')}</label
 				>
 				<input type="text" name="address" class="block border rounded-xl p-3 w-full" />
 			</div>
 
 			<div>
 				<div class="flex justify-between items-center">
-					<span class="font-bold">{$_('user.settings.emailNotifications')}</span>
+					<span class="font-bold">{$t('user.settings.emailNotifications')}</span>
 					<Toggle id="email-notify" />
 				</div>
 				<p class="text-secondary mt-1 w-9/12">
-					{$_('user.settings.emailNotificationsDescription')}
+					{$t('user.settings.emailNotificationsDescription')}
 				</p>
 			</div>
 
 			<div>
 				<div class="flex justify-between items-center">
-					<span class="font-bold">{$_('user.settings.smsNotifications')}</span>
+					<span class="font-bold">{$t('user.settings.smsNotifications')}</span>
 					<Toggle id="sms-notify" />
 				</div>
 				<p class="text-secondary mt-1 w-9/12">
-					{$_('user.settings.smsNotificationsDescription')}
+					{$t('user.settings.smsNotificationsDescription')}
 				</p>
 			</div>
 
 			<div>
-				<span class="font-bold mb-1 block">{$_('user.settings.theme')}</span>
-				<p class="text-secondary mb-1">{$_('user.settings.themeDescription')}</p>
+				<span class="font-bold mb-1 block">{$t('user.settings.theme')}</span>
+				<p class="text-secondary mb-1">{$t('user.settings.themeDescription')}</p>
 				{#each colorThemes as colors}
 					<button
 						class="mr-2 w-10 h-10 bg-gradient-to-r {colors.color1} {colors.color2} rounded-xl border-2 {selectedTheme ===
@@ -136,7 +136,7 @@
 		{:else if setting === 'pos'}
 			<div>
 				<label for="currency" class="font-bold block mb-1"
-					>{$_('user.settings.localCurrency')}</label
+					>{$t('user.settings.localCurrency')}</label
 				>
 				<select name="currency" on:change={updateFiat} class="block py-3 w-full">
 					{#each fiats as fiat}
@@ -146,27 +146,27 @@
 			</div>
 
 			<div>
-				<label for="btc-unit" class="font-bold block mb-1">{$_('user.settings.btcUnit')}</label>
+				<label for="btc-unit" class="font-bold block mb-1">{$t('user.settings.btcUnit')}</label>
 				<select disabled name="btc-unit" class="block py-3 w-full">
-					<option value="SATS">{$_('user.settings.satoshis')} (SAT)</option>
-					<option value="BTC">{$_('user.settings.bitcoin')} (BTC)</option>
+					<option value="SATS">{$t('user.settings.satoshis')} (SAT)</option>
+					<option value="BTC">{$t('user.settings.bitcoin')} (BTC)</option>
 				</select>
 			</div>
 		{:else}
 			<div>
-				<span class="font-bold mb-1">{$_('user.settings.securityPIN')}</span>
+				<span class="font-bold mb-1">{$t('user.settings.securityPIN')}</span>
 				<p class="text-secondary mb-1">
-					{$_('user.settings.securityPINDescription')}
+					{$t('user.settings.securityPINDescription')}
 				</p>
 				<button class="p-3 border rounded-3xl font-bold flex justify-center items-center"
-					><Icon icon="lock" style="mr-1" /> {$_('user.settings.setPIN')}</button
+					><Icon icon="lock" style="mr-1" /> {$t('user.settings.setPIN')}</button
 				>
 			</div>
 
 			<div>
-				<label for="auto-lock" class="font-bold mb-1">{$_('user.settings.autoLock')}</label>
+				<label for="auto-lock" class="font-bold mb-1">{$t('user.settings.autoLock')}</label>
 				<p class="text-secondary mb-1">
-					{$_('user.settings.autoLockDescription')}
+					{$t('user.settings.autoLockDescription')}
 				</p>
 				<select name="auto-lock" class="block py-3 w-full">
 					<option value="5">5 min</option>
@@ -178,12 +178,12 @@
 			</div>
 
 			<div>
-				<span class="font-bold mb-1">{$_('user.settings.twofa')}</span>
+				<span class="font-bold mb-1">{$t('user.settings.twofa')}</span>
 				<p class="text-secondary mb-1">
-					{$_('user.settings.twofaDescription')}
+					{$t('user.settings.twofaDescription')}
 				</p>
 				<button class="p-3 border rounded-3xl font-bold flex justify-center items-center"
-					><Icon icon="mobile" style="mr-1" /> {$_('user.settings.twofaSetup')}</button
+					><Icon icon="mobile" style="mr-1" /> {$t('user.settings.twofaSetup')}</button
 				>
 			</div>
 		{/if}
diff --git a/src/routes/[username]/support/+page.svelte b/src/routes/[username]/support/+page.svelte
index 6bbb5fb2..e7341806 100644
--- a/src/routes/[username]/support/+page.svelte
+++ b/src/routes/[username]/support/+page.svelte
@@ -2,7 +2,7 @@
 	// this needs to be hooked up to the backend
 	import { AppHeader } from '$comp';
 	import { user } from '$lib/store';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 	let email;
 	let message;
 </script>
@@ -12,12 +12,12 @@
 
 	<div class="my-20">
 		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
-			{$_('user.support.header')}
+			{$t('user.support.header')}
 		</h1>
 
 		<form class="space-y-5 mx-auto w-11/12 md:w-[350px]">
 			<div>
-				<label for="email" class="font-semibold">{$_('user.support.email')}</label>
+				<label for="email" class="font-semibold">{$t('user.support.email')}</label>
 				<input
 					class="block border rounded-xl p-2 w-full"
 					type="email"
@@ -28,7 +28,7 @@
 			</div>
 
 			<div>
-				<label for="account" class="font-semibold">{$_('user.support.accountName')}</label>
+				<label for="account" class="font-semibold">{$t('user.support.accountName')}</label>
 				<input
 					class="block border rounded-xl p-2 w-full"
 					type="text"
@@ -40,7 +40,7 @@
 			</div>
 
 			<div>
-				<label for="message" class="font-semibold">{$_('user.support.message')}</label>
+				<label for="message" class="font-semibold">{$t('user.support.message')}</label>
 				<textarea
 					rows={5}
 					class="block border rounded-xl p-2 w-full"
@@ -56,7 +56,7 @@
 				class="{!email || !message
 					? 'opacity-50'
 					: 'opacity-100'} bg-black text-white font-bold rounded-xl py-3 w-full mx-auto"
-				>{$_('user.support.send')}</button
+				>{$t('user.support.send')}</button
 			>
 		</form>
 	</div>
diff --git a/src/routes/[username]/transactions/+page.svelte b/src/routes/[username]/transactions/+page.svelte
index 996b9b9a..743bfc1c 100644
--- a/src/routes/[username]/transactions/+page.svelte
+++ b/src/routes/[username]/transactions/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { AppHeader } from '$comp';
 	import { user, newPayment } from '$lib/store';
-	import { _ } from 'svelte-i18n';
+	import { t } from '$lib/translations';
 
 	$newPayment = false;
 
@@ -13,14 +13,14 @@
 
 	<div class="my-20">
 		<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
-			{$_('user.transactions.header')}
+			{$t('user.transactions.header')}
 		</h1>
 
 		<div class="max-w-5xl w-11/12 md:w-3/4 xl:w-1/2 mx-auto md:text-lg">
 			<div class="text-secondary grid grid-cols-3 mb-5">
-				<h2>{$_('user.transactions.AMOUNT')}</h2>
-				<h2 class="text-center">{$_('user.transactions.TYPE')}</h2>
-				<h2 class="text-right">{$_('user.transactions.TIME')}</h2>
+				<h2>{$t('user.transactions.AMOUNT')}</h2>
+				<h2 class="text-center">{$t('user.transactions.TYPE')}</h2>
+				<h2 class="text-right">{$t('user.transactions.TIME')}</h2>
 			</div>
 
 			<div class="space-y-10">
@@ -45,7 +45,7 @@
 
 							<div class="text-center">
 								<span class="text-secondary"
-									>{$_('user.transactions.' + (tx.amount < 0 ? 'sent' : 'received'))}</span
+									>{$t('user.transactions.' + (tx.amount < 0 ? 'sent' : 'received'))}</span
 								>
 							</div>
 
@@ -55,7 +55,7 @@
 						</div>
 					{/each}
 				{:else}
-					<p class="text-secondary text-lg text-center">{$_('user.transactions.empty')}</p>
+					<p class="text-secondary text-lg text-center">{$t('user.transactions.empty')}</p>
 				{/if}
 			</div>
 		</div>
-- 
cgit v1.2.3